<template>
    <van-nav-bar title="用户注册" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div id="box">
        <div class="v-photo">
            <!-- <van-image src="https://img.zcool.cn/community/01f8b6593a0054a8012193a31c86c5.jpg@2o.jpg" /> -->
        </div>
      <!-- 上传图片 -->
      <van-field name="uploader" label="文件上传">
  <template #input>
    <!-- <van-uploader v-model="value" /> -->
    <van-uploader :after-read="afterRead" v-model="fileList" multiple :max-count="1" />
  </template>
</van-field>
        <!-- 注册账号密码 -->
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field v-model="username" name="账号" required label="账号" placeholder="账号"
                    :rules="[{ required: true, message: '请填写账号' }]" />
                <van-field v-model="password" type="password" name="密码" required label="密码" placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]" />
                <van-field v-model="nick" name="昵称" required label="昵称"  placeholder="昵称" 
                    :rules="[{ required: true, message: '请填写昵称' }]" />
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">
                    注册账号
                </van-button>
            </div>
        </van-form>
    </div>
</template>

<script setup lang="ts">
import { ref, type Ref } from 'vue'
import { RequestAddGoods } from '@/api/index'
import axios from "axios"
import { Toast } from 'vant'
import { useRouter } from 'vue-router'


let myfile = ''
const router = useRouter()

// 返回上一页
const onClickLeft = () => history.back()
//账号密码昵称
const username: Ref<string> = ref('')
const nick: Ref<string> = ref('')
const password: Ref<string> = ref('')
// const headerimg: Ref<string> = ref('')

    


//注册账号
const onSubmit = async () => {
    const formData = new FormData()
    formData.append('myfile', myfile)
    formData.append('userName', username.value)
    formData.append('userPwd', password.value)
    formData.append('nick', nick.value)
    const res = await axios({
        method: 'post',
        url: 'http://localhost:3000/users/register',
        //post请求参数使用data选项, get参数 params选项
        headers: { 'content-type': 'multipart/form-data' },
        data:formData
    })
    const { code  } = res.data
    if (code === 1) {
        Toast.success('注册成功！')
        router.replace('/phone')
    } else {
        Toast.fail('注册失败')
    }

}

const afterRead = (file) => {
      // 此时可以自行将文件上传至服务器
      console.log(file.file);
      myfile = file.file
}

const fileList = ref([
      { url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg' },
]);





</script>

<style lang="scss" scoped>
#box1 {
    width: 100%;
    height: 100%;

}
</style> 

